<template>
  <div class="page">
    <div class="article" v-html="content"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: ""
    };
  },
  created() {
    let _this = this;
    this.reload(_this.$route.query.id);
  },
  methods: { 
    reload(id) {
      let _this = this;
      _this.$axios
        .get("content/show", {
          params: {
            id: _this.$route.query.id
          }
        })
        .then(res => {
          _this.content = res.content;
        });
    }
  },
  watch: {
    "$route.query.id": function(id) {
      this.reload(id);
    }
  }
};
</script>

<style lang="less" scoped>
.article {
  width: @article-width;
  margin-top: 1.5rem;
  background: white;
  display: flex;
  flex-direction: column;
  color: @black-color;
  box-sizing: border-box;
  padding: 0.5rem 0.5rem;
  @media only screen and (max-width: 500px),
    only screen and (max-device-width: 500px) {
    width: calc(100% - 0.6rem);
    height: auto;
    padding: 0.3rem;
  }
}
</style>